<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routersList } from './router/index'
import { computed } from 'vue';

const route = useRoute()
const ApiItem =  ['login','user','role','system']
const isRouteApiItem = computed(()=>{
  return ApiItem.includes(route.name as string)
})
</script>


<template>
  <header v-if="!isRouteApiItem">
    <div class="wrapper">
      <nav>
        <RouterLink v-for="item in routersList" :key="item.name" :to="{path: item.path}">{{item.title}}</RouterLink>
        <!-- <router-link v-for="item in routersList" :key="item.name" :to="{path: item.path}">{{item.title}}</router-link> -->
      </nav>
      <div>
        6666666
      </div>
    </div>
  </header>
  <RouterView />
  <!-- <router-view></router-view> -->
</template>

<style scoped>
.style {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
  color: blue;
}
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
  }
}
</style>
